<!-- This sets up the cropping UI when the document loads (@onload is referenced in the layout file).
The param passed is the max zoom level for the cropping UI. -->
<% @onload = 'setup_image_cropper(6)' -%>

<!-- alternate css for IE6 to get around its goddamned lack of support for png transparency. -->
<!--[if IE 6]>
	<style type="text/css">
		#crop_canvas{
			background: url(/images/kropper/crop_stencil.png);
		}
		#crop_overlay{
			background: url(/images/kropper/crop_stencil.gif);
		}
		#zoom_slider_handle{
			background: url(/images/kropper/slider.gif);
		}
	</style>
<![endif]-->
<h2>Crop</h2>

<div>
	<% form_tag :action => 'crop' do -%>

		<div id="crop_form_fields">
			<h4>Form fields passed to the server (you'll probably want to make these hidden fields in your app)</h4>
			<p>These four fields are in the image's coordinate space&#8212;they project the
				cropping stencil onto the image. This lets you crop an image to the stencil's
				shape without shrinking it down to the stencil's actual size.</p>
			<p>crop_left: <%= text_field_tag "crop_left", "0" %></p>
			<p>crop_top: <%= text_field_tag "crop_top", "0" %></p>
			<p>crop_width: <%= text_field_tag "crop_width", "1" %></p>
			<p>crop_height: <%= text_field_tag "crop_height", "1" %></p>
			<p>stencil_width and stencil_height pass the onscreen size of the cropping stencil.
				Set resize_to_stencil to true to resize the cropped image to the actual stencil size.</p>
			<p>stencil_width: <%= text_field_tag "stencil_width", "1" %></p>
			<p>stencil_height: <%= text_field_tag "stencil_height", "1" %></p>
			<p>resize_to_stencil: <%= text_field_tag "resize_to_stencil", "false" %></p>
			<p>When the cancel button is clicked, this field is set to true and the form is submitted. This lets your controller customize what action the server takes when cropping is canceled.</p>
			<p>crop_cancel: <%= text_field_tag "crop_cancel", "false" %></p>
		</div>

		<!-- The dimensions and appearance of these elements are all defined in kropper.css -->
		<div id="image_cropper">
		    <div id="crop_header">Crop your image</div>
		    <div id="crop_canvas">
		        <div id="crop_loading_overlay">
					<h2>loading...</h2>
					<p>(If this message doesn't disappear automatically, please make sure your browser has Javascript turned on.)</p>
				</div>
		        <div id="crop_overlay"></div>
		        <div id="crop_stencil"></div>
		        <div id="image_dragger"></div>
				<%= image_tag(@new_player.public_filename, :id => "uncropped_image" ) %>
		    </div>
		    <div id="crop_footer">
		    	<div id="zoom_slider">
		        	<div id="zoom_slider_handle"></div>
		    	</div>
				<div id="crop_buttons">
					<%= submit_tag "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Crop Image&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;", :id => "crop_submit_btn" %>
					<input type="button" value="Cancel" id="crop_cancel_btn" onclick="this.form.crop_cancel.value='true';this.form.submit();" />
					<input type="button" value="&nbsp;Reset&nbsp;" id="crop_reset_btn" />
				</div>
			</div>
		    <div id="crop_subfooter">
		        	<a href="http://kropper.captchr.com">kropper v1.0: an open-source image cropper for Rails apps</a>
			</div>
		</div>

	<% end -%>
</div>